<template>
  <div>
    <van-tabs :active="active">
      <van-tab title="标签 1">
        <swiper :swiper="detail.pics"></swiper>
        <div>{{ detail.goods_name }}</div>
        <div>${{ detail.goods_price }}</div>
      </van-tab>
      <van-tab title="标签 2">
        <div v-html="detail.goods_introduce"></div>
      </van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
    </van-tabs>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
      <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
      <van-action-bar-button type="warning" text="加入购物车" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import swiper from "@/components/swiper.vue";
import { detailApi } from "@/api/api";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const active = ref(0);

const goods_id = ref(route.query.goods_id);

const detail = ref({});

const detailFun = () => {
  detailApi(goods_id.value).then((res) => {
    detail.value = res.data.message;
  });
};
detailFun();
</script>

<style lang="scss" scoped></style>
